<template>
	<view class="uiwu">
		<view class="uiwu-scroll">
			<scroll-view scroll-x>
				<view class="uiwu-scroll-list uiwu-flex-align">
					<view class="item" 
						:class="index == ActiveIndex ? 'active' : ''" 
						v-for="(item,index) in menuTablist" 
						:key="index"
						@tap="swiperTap(index)"
					>
						{{item}}
					</view>
				</view>
			</scroll-view>
		</view>
		<scroll-view class="uiwu-list-scroll" :class="ActiveIndex == 0 ? 'active' : ''" scroll-y>
			<uiwu-list :loading="more" v-if="listData.length > 0 || ActiveIndex != 0">
				<view class="uiwu-deposit" v-if="ActiveIndex == 0">
					<view class="uiwu-deposit-item uiwu-flex-align" v-for="(item,index) in listData" :key="index">
						<radio color="#EF821E" :checked="item.checked" :value="item.id" @tap="changeRadio(item)" />
						<image :src="item.product_image" mode="aspectFill"></image>
						<view class="in">
							<view class="title">{{item.product_name}}</view>
							<view class="tips">{{getDay(item.expire_time)}}天后过期</view>
							<view class="time">{{uiwu.formatTimestamp(item.add_time * 1000)}}</view>
						</view>
					</view>
				</view>
				<view class="uiwu-list" v-else>
					<view 
						class="uiwu-list-item uiwu-flex-align" 
						v-for="(item,index) in listData" 
						:key="index"
						@tap="uiwu.openWindow(`/pages/prize/prizeDetail?id=${item.id}`)"
					>
						<image :src="item.product_image" mode="aspectFill"></image>
						<view class="in uiwu-flex-column">
							<view class="title uiwu-flex-space">
								<text style="flex: 1;">{{item.product_name}}</text>
								<text>{{menuTablist[ActiveIndex]}}</text>
							</view>
							<view class="jifen" v-if="ActiveIndex == 4">【{{item.give_integral}}积分】</view>
							<view class="time">{{uiwu.formatTimestamp(item.add_time * 1000)}}</view>
						</view>
					</view>
				</view>
			</uiwu-list>
			<view v-if="ActiveIndex == 0 && listData.length == 0" class="notedata uiwu-flex-column uiwu-flex-center">
				<image src="/static/notedata.png" mode="widthFix"></image>
				<text>零时还在零食机里面哦</text>
				<view class="uiwu-flex-center" @tap="goHomeBack">去抓零食</view>
			</view>
		</scroll-view>
		<uiwu-footer height="196rpx" v-if="ActiveIndex == 0 && listData.length > 0">
			<view style="width: 100%;">
				<label class="uiwu-footer-radio uiwu-flex-align" @tap="allChangeRadio">
					<radio value="1" color="#EF821E" @tap.stop="allChangeRadio" :checked="allAIsTrue" /><text>全选</text>
				</label>
				<view class="uiwu-footer">
					<view class="uiwu-footer-box uiwu-flex-space">
						<text class="uiwu-flex-center" @tap="uiwu.openWindow(`/pages/prize/exchange`)">积分兑换</text>
						<text class="uiwu-flex-center" @tap="openWindow(`/pages/prize/confirm`)">申请发货</text>
					</view>
				</view>
			</view>
		</uiwu-footer>
	</view>
</template>

<script setup lang="ts">
	import { onLoad , onShow } from '@dcloudio/uni-app';
	import { inject, ref } from 'vue';
	import { prizelist } from '@/api/prize';
	const uiwu = inject<any>('uiwu');
	const menuTablist = ref<Array<string>>(['寄存中','待发货','待收货','已完成','已兑换'])
	const ActiveIndex = ref<boolean>(0)
	const listData = ref<Array<object>>([])
	const pageNum = ref<number>(1)
	const more = ref<string>('loading');
	const isLock = ref<boolean>(true)
	const store = inject<any>('store');
	const allAIsTrue = ref<boolean>(false)
	const swiperTap = (index:number) => {
		ActiveIndex.value = index
		getprizelist()
	}
	const getprizelist = async (mack:boolean=false) : Promise<any> =>{
		if(!mack) pageNum.value = 1
		const { data:{data , total}} = await prizelist({
			page:pageNum.value,
			state:ActiveIndex.value
		});
		isLock.value = true
		uiwu.setlist({
			isMore:mack,
			listData,
			total,
			listRow:data,
			more,
			pageNum
		})
		allAIsTrue.value = listData.value.every(item => item.checked === true);
	}
	const goHomeBack = () => {
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	const openWindow = (url) => {
		if(!getCheckedId().length) return uiwu.toast('请选择商品')
		uiwu.openWindow(`${url}?ids=${JSON.stringify(getCheckedId())}`)
	}
	/**
	 * 选中某个商品
	 */
	const changeRadio = (item) => {
		item.checked = !item.checked
		allAIsTrue.value = listData.value.every(item => item.checked === true);
	}
	/**
	 * 全选
	 */
	const allChangeRadio = () => {
		listData.value.forEach((item)=>{
			item.checked = !item.checked
		})
		allAIsTrue.value = listData.value.every(item => item.checked === true);
	}
	const getCheckedId = () => {
		return listData.value.filter(val=>val.checked).map(val=>val.id)
	}
	/**
	 * 获取到期时间
	 */
	const getDay = (time) => {
		const currentTimestamp = Math.floor(Date.now() / 1000);
		const daysDifference  = time - currentTimestamp
		return Math.floor( daysDifference / (60 * 60 * 24)) || 0
	}
	onShow(()=>{
		getprizelist()
	})
</script>

<style lang="scss">
	page{
		background-color: #e6e6e6;
	}
	.uiwu-scroll{
		background-color: #272323;
		width: 100%;
		height: 82rpx;
		&-list{
			padding: 0 24rpx;
			justify-content: space-between;
			height: 82rpx;
			.item{
				flex-shrink: 0;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				height: 55rpx;
				line-height: 55rpx;
				&.active{
					text-align: center;
					width: 176rpx;
					background: url('../../static/indextab.png') no-repeat 0 0;
					background-size: 100% 100%;
					font-size: 32rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 800;
					color: #FFFFFF;
					line-height: inherit;
					text-shadow: 0px 4rpx 0rpx #231815;
				}
			}
		}
	}
	.notedata{
		width: 100%;
		height: calc(100vh - 102rpx - 196rpx);
		image{
			width: 220rpx;
		}
		text{
			font-size: 28rpx;
			font-weight: 500;
			color: #444444;
			margin-top: 10rpx;
		}
		view{
			width: 300rpx;
			height: 80rpx;
			background: #EF821E;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-top: 40rpx;
		}
	}
	.uiwu-deposit{
		background-color: #fff;
		&-item{
			padding: 24rpx;
			border-bottom: 1rpx solid #e6e6e6;
			&:last-child{
				border-bottom: 0;
			}
		}
		radio{
			transform: scale(0.8);
		}
		image{
			width: 136rpx;
			height: 136rpx;
			border-radius: 16rpx;
			margin: 0 24rpx;
		}
		.in{
			flex: 1;
			.title{
				font-size: 28rpx;
				font-weight: 800;
				color: #231815;
			}
			.tips{
				margin: 10rpx 0 10rpx;
				display: inline-block;
				padding: 4rpx 10rpx;
				height: 40rpx;
				border-radius: 8rpx;
				border: 1rpx solid #E6E6E6;
				font-size: 24rpx;
				font-weight: 500;
				color: #444444;
			}
			.time{
				font-size: 24rpx;
				font-weight: 300;
				color: #999999;
			}
		}
	}
	.uiwu-list{
		padding: 0 24rpx;
		background-color: #fff;
		&-item{
			padding: 24rpx 0;
			image{
				width: 136rpx;
				height: 136rpx;
				border-radius: 16rpx;
				margin-right: 24rpx;
			}
			.in{
				flex: 1;
				height: 136rpx;
				justify-content: space-around;
			}
			.title{
				text{
					font-size: 28rpx;
					font-weight: 800;
					color: #231815;
					&:nth-child(2){
						color: #EF821E;	
						font-weight: 400;
					}
				}
			}
			.jifen{
				font-size: 24rpx;
				font-weight: 500;
				color: #444444;
			}
			.time{
				font-size: 24rpx;
				font-weight: 300;
				color: #999999;
			}
		}
	}
	.uiwu-list-scroll{
		width: 100%;
		margin-top: 20rpx;
		height: calc(100vh - 102rpx);
		/* #ifdef H5 */
		height: calc(100vh - 102rpx - 44px);
		/* #endif */
		&.active{
			height: calc(100vh - 102rpx - 196rpx);
			/* #ifdef H5 */
			height: calc(100vh - 102rpx - 196rpx - 44px);
			/* #endif */
		}
		
	}
	.uiwu-footer{
		width: 100%;
		padding: 0 24rpx;
		background-color: #fff;
		&-box{
			padding: 16rpx 0;
			text{
				width: 338rpx;
				height: 72rpx;
				border-radius: 36rpx;
				border: 3rpx solid #EF821E;
				font-size: 32rpx;
				font-weight: bold;
				color: #EF821E;
				&:nth-child(2){
					background-color: #EF821E;
					color: #FFF;
				}
			}
		}
	}
	.uiwu-footer-radio{
		padding: 24rpx;
		radio{
			transform: scale(0.8);
		}
		text{
			font-size: 28rpx;
			font-weight: bold;
			color: #231815;
		}
	}
</style>
